<template>
    <div class="qingwu">
        <div class="admin_table_page_title">
            <a-button @click="$router.back()" class="float_right" icon="arrow-left">返回</a-button>
            店铺信息
        </div>
        <div class="unline underm"></div>
        <div class="admin_form">
            <a-descriptions bordered layout="vertical" :column="{ xxl: 4, xl: 4, lg: 2, md: 2, sm: 2, xs: 1 }">
                <a-descriptions-item label="标题">{{info.title}}</a-descriptions-item>
                <a-descriptions-item label="图片">
                    <div v-viewer>
                        <img height="120px" :src="info.image" alt="">
                    </div>
                </a-descriptions-item>
                <a-descriptions-item label="轮播图">
                    <div class="item_img" v-for="(v,k) in info.images" :key="k" >
                        <img :src="v" alt=""/>
                    </div>
                </a-descriptions-item>
                <a-descriptions-item label="元/月">{{info.money}}</a-descriptions-item>
                <a-descriptions-item label="描述" :span="4">{{info.describe}}</a-descriptions-item>
                <a-descriptions-item label="小区名称">{{info.community.community_name}}</a-descriptions-item>
                <a-descriptions-item label="户型">{{info.house_type}}</a-descriptions-item>
                <a-descriptions-item label="类型">{{info.house_type1}}</a-descriptions-item>
                <a-descriptions-item label="付款方式">{{info.pay_method}}</a-descriptions-item>
                <a-descriptions-item label="详情地址">{{info.community.community_address}}</a-descriptions-item>
                <a-descriptions-item label="房源详情" :span="4">
                    <div v-for="(item, index) in info.more_option">{{index}} ===> {{item}}</div>
                </a-descriptions-item>
                <a-descriptions-item label="出租类型">{{info.type == 1 ? '整租' : '合租'}}</a-descriptions-item>
                <a-descriptions-item label="房屋面积㎡">{{info.area}}</a-descriptions-item>
                <a-descriptions-item label="房屋楼层">{{info.storey}}</a-descriptions-item>
                <a-descriptions-item label="房屋朝向">{{info.direction}}</a-descriptions-item>
                <a-descriptions-item label="姓名">{{info.username}}</a-descriptions-item>
                <a-descriptions-item label="称呼">{{info.call}}</a-descriptions-item>
                <a-descriptions-item label="电话">{{info.phone}}</a-descriptions-item>
                <a-descriptions-item label="发布时间">{{info.created_at}}</a-descriptions-item>
                <a-descriptions-item label="最近修改时间">{{info.updated_at}}</a-descriptions-item>
            </a-descriptions>

        </div>
    </div>
</template>

<script>
    import Viewer from 'v-viewer'
    import 'viewerjs/dist/viewer.css'

    Vue.use(Viewer)
    export default {
        components: {},
        props: {},
        data() {
            return {
                info: {},
                id: 0,
            };
        },
        watch: {},
        computed: {},
        methods: {
            get_info() {
                this.$get(this.$api.estateHouseLease + '/' + this.id).then(res => {
                    this.info = res.data;
                })
            },
            onload() {
                // 判断你是否是编辑
                if (!this.$isEmpty(this.$route.params.id)) {
                    this.id = this.$route.params.id;
                    this.get_info();
                }
            },

        },
        created() {
            this.onload();
        },
        mounted() {
        }
    };
</script>
<style lang="scss" scoped>
    .verify_btn {
        margin-top: 30px;
    }
</style>
